<template>
    <BasePage>
        <el-form slot="form" :inline="true" size="medium" @submit.native.prevent>
            <el-form-item label="工程时间">
                <el-date-picker v-model="form.date" value-format="yyyy-MM-dd" :editable="false" placeholder="请选择" />
            </el-form-item>
            <el-form-item label="公路名称">
                <RoadSelect :value.sync="form.roadCode" clearable />
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="form.status" clearable placeholder="请选择" style="width: 100%">
                    <el-option v-for="item in projectStatus" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <BaseButton v-permission="{ btnCode: 'dlyh_c16_d59_2' }" @click="handleFilter">查询</BaseButton>
                <BaseButton type="second" @click="resetConditions">重置</BaseButton>
            </el-form-item>
        </el-form>

        <div slot="button">
            <BaseButton v-permission="{ btnCode: 'dlyh_c16_d61_2' }" @click="handleAdd()">新建养护工程</BaseButton>
        </div>

        <!--数据列表区-->
        <BaseTable slot="table" v-loading="listLoading" :columns="columns" :data="list" row-key="id" height="calc(100% - 73px)" highlight-current-row>
            <template #number="{ scope: { row } }">
                <BaseButton type="text" @click="handleDetail(row)">{{ row.number }}</BaseButton>
            </template>
            <template #status="{ scope: { row } }">
                <span :style="`color:${statusColor[row.status]};`">{{ value2Name(row.status) }}</span>
            </template>
            <template #direction="{ scope: { row } }">
                <span>{{ directions[row.direction] }}</span>
            </template>
            <template #handle="{ scope: { row } }">
                <BaseButton v-show="row.status === 1" v-permission="{ btnCode: 'dlyh_c16_d64_2' }" type="text" @click="showDialog(row)"> 更新进度 </BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_c16_d65_2' }" type="text" @click="handleReport(row.number)">上报</BaseButton>
                <BaseButton v-show="row.status === 1" v-permission="{ btnCode: 'dlyh_c16_d66_2' }" type="text" @click="handleEdit(row.id)">编辑</BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_c16_d67_2' }" type="text" color="danger" @click="handleDelete(row.id)">删除</BaseButton>
                <BaseButton
                    v-show="row.verifyStatus === 0 && row.status !== 1"
                    v-permission="{ btnCode: 'dlyh_c16_d62_2' }"
                    type="text"
                    @click="handleVerify(row)"
                >
                    完工核实
                </BaseButton>
                <BaseButton
                    v-show="row.verifyStatus === 1 && row.status !== 1"
                    v-permission="{ btnCode: 'dlyh_c16_d63_2' }"
                    type="text"
                    @click="handleCheck(row)"
                >
                    查看核实结果
                </BaseButton>
            </template>
        </BaseTable>
        <!--分页组件-->
        <Pagination
            slot="pagination"
            :current-page.sync="page.pageNo"
            :page-size.sync="page.pageSize"
            :total="page.total"
            @current-change="getList"
            @size-change="getList"
        />

        <UpdateProgress ref="updateProgressDialog" :visible.sync="dialogVisible" @submit="getList" />
        <!-- 完工核实 -->
        <VerifyDialog ref="verifyDialog" @updateList="getList" />
        <!-- 查看核实结果 -->
        <CheckDialog ref="checkDialog" />
    </BasePage>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import { MaintenanceProjectModel, OrgModel } from '@/models'
import reconfirm from '@/utils/reconfirm'
import { ProjectStatus, StatusColor } from '../../constants'
import { Directions } from '@/config/constants'

import UpdateProgress from './components/UpdateProgress'
import KeepAliveHandler from '@/mixins/keepAliveHandler'

import VerifyDialog from './components/VerifyDialog'
import CheckDialog from './components/CheckDialog'

export default {
    name: 'MaintenanceProjectIndex',
    components: {
        BasePage,
        UpdateProgress,
        VerifyDialog,
        CheckDialog
    },
    mixins: [
        KeepAliveHandler({
            defaultCondition: {
                date: null,
                roadCode: null,
                status: null
            },
            conditionObjKey: 'form'
        })
    ],
    data() {
        return {
            projectStatus: ProjectStatus,
            statusColor: StatusColor,
            directions: Directions,
            model: new MaintenanceProjectModel(),
            orgModel: new OrgModel(),
            form: {
                date: null,
                year: null,
                status: null
            },
            orgOptions: [],
            dialogVisible: false,
            listLoading: true,
            list: [],
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            columns: Object.freeze([
                {
                    slot: 'number',
                    attrs: {
                        prop: 'number',
                        label: '编号',
                        width: '170',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'date',
                        label: '工程时间',
                        'show-overflow-tooltip': true,
                        width: '200'
                    }
                },
                {
                    attrs: {
                        prop: 'projectName',
                        label: '项目名称',
                        'show-overflow-tooltip': true,
                        'min-width': '120'
                    }
                },
                {
                    attrs: {
                        prop: 'projectTypeName',
                        label: '工程类型',
                        'show-overflow-tooltip': true,
                        'min-width': '200'
                    }
                },
                {
                    attrs: {
                        prop: 'roadName',
                        label: '公路名称',
                        'show-overflow-tooltip': true,
                        width: '140'
                    }
                },
                {
                    slot: 'direction',
                    attrs: {
                        prop: 'direction',
                        label: '方向',
                        'show-overflow-tooltip': true,
                        width: '80'
                    }
                },
                {
                    attrs: {
                        prop: 'location',
                        label: '养护位置',
                        'show-overflow-tooltip': true,
                        width: '180'
                    }
                },
                {
                    slot: 'status',
                    attrs: {
                        prop: 'status',
                        label: '状态',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        width: '220',
                        fixed: 'right'
                    }
                }
            ])
        }
    },
    created() {
        this.initQuery()
        this.getOrgAll()
        this.getList()
    },
    methods: {
        // 完工核实
        handleVerify(row) {
            this.$refs.verifyDialog.init({ number: row.number })
        },
        // 查看核实结果
        handleCheck(row) {
            const { verifyDesc, verifyPhotos } = row
            this.$refs.checkDialog.init({ verifyDesc, verifyPhotos })
        },
        initQuery() {
            // 获取url上的对应参数，且对其中的string数字转为number
            this.form = this.objectString2Number(this.$route.query, ['pageNo', 'pageSize', 'status'])
            this.page.pageNo = this.form.pageNo || 1
            this.page.pageSize = this.form.pageSize || 10
        },
        objectString2Number(obj, keys = ['pageNo', 'pageSize']) {
            keys.forEach((key) => {
                if (obj[key]) {
                    obj[key] = Number(obj[key])
                }
            })
            return obj
        },
        addRouterQuery(query) {
            this.$router.push({ name: this.$route.name, query })
        },
        // 上报到hds
        handleReport(number) {
            reconfirm({
                text: '上报后，该养护工程将上报为计划性事件，建议上报影响交通出行的工程为事件。',
                title: '确认上报该养护工程?',
                callback: () => {
                    return this.model.report({ number }).then(() => {
                        this.$message.success('上报成功!')
                    })
                }
            })
        },
        value2Name(value) {
            let name = ''
            this.projectStatus.some((item) => {
                if (item.id === value) {
                    name = item.name
                    return true
                }
            })
            return name
        },
        // 获取机构下拉项
        getOrgAll() {
            this.orgModel.getListAll().then((res) => {
                this.orgOptions = res
            })
        },
        getList(type, val) {
            if (val) {
                if (type === 'no') {
                    this.page.pageNo = val
                }
                if (type === 'size') {
                    this.page.pageSize = val
                }
                this.addRouterQuery({ ...this.form, ...this.page })
            }

            this.listLoading = true
            this.model
                .getList(this.form, this.page)
                .then((res) => {
                    this.list = res.list
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        // 查询
        handleFilter() {
            this.page.pageNo = 1
            this.addRouterQuery({ ...this.form, ...this.page })
            this.getList()
        },
        addSub() {},
        handleDelete(id) {
            reconfirm({
                callback: () => this.delete(id)
            })
        },
        delete(id) {
            return this.model.delete({ id }).then(() => {
                this.getList()
                this.$message.success('删除成功!')
            })
        },
        handleDetail(row) {
            this.$router.push({ path: 'detail', query: { id: row.id, number: row.number } })
        },
        showDialog(row) {
            this.$refs['updateProgressDialog'].show(row)
        },
        handleAdd() {
            this.$router.push({ path: 'add', query: { type: 'add' } })
        },
        handleEdit(id) {
            this.$router.push({ path: 'edit', query: { type: 'edit', id } })
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
